<template>
	<div class="floor">
		<div class="py-container">
			<div class="title clearfix">
				<h3 class="fl">{{ floor.name }}</h3>
				<div class="fr">
					<ul class="nav-tabs clearfix">
						<li class="active" v-for="(item, index) in floor.navList" :key="index">
							<a href="item.url" data-toggle="tab">{{ item.text }}</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="tab-content">
				<div class="tab-pane">
					<div class="floor-1">
						<div class="blockgary">
							<ul class="jd-list">
								<li v-for="(k, index) in floor.keywords" :key="index">{{ k }}</li>

							</ul>
							<img :src="floor.imgUrl" />
						</div>
						<div class="floorBanner">

							<swiper class="swiper" :options="swiperOption">
								<!-- 每一屏 -->
								<swiper-slide v-for="item in floor.carouselList" :key="item.id">
									<img :src="item.imgUrl" alt="">
								</swiper-slide>
								<!-- 底部小圆点 -->
								<div class="swiper-pagination" slot="pagination"></div>
								<!-- 上一张、下一张按钮 -->
								<div class="swiper-button-prev" slot="button-prev"></div>
								<div class="swiper-button-next" slot="button-next"></div>
							</swiper>

						</div>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>

						<!-- 如果需要导航按钮 -->
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next"></div>

						<div class="split">
							<span class="floor-x-line"></span>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[0]" />
							</div>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[1]" />
							</div>
						</div>
						<div class="split center">
							<img :src="floor.bigImg" />
						</div>
						<div class="split">
							<span class="floor-x-line"></span>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[2]" />
							</div>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[3]" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
//引入组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
//引入样式
import 'swiper/css/swiper.css'
export default {
	name: 'Floor',
	props: {
		floor: {
			type: Object,
			required: true
		},
		index: {
			required: true,
			type: Number,
		}
	},
	components: {
		Swiper,
		SwiperSlide
	},
	data() {
		return {
			swiperOption: {
				slidesPerView: 1,   //设置slider容器能够同时显示的slides数量
				spaceBetween: 30,   //在slide之间设置距离（单位px）。
				loop: true,   //循环播放
				pagination: {  //分页
					el: '.swiper-pagination',  //展示小圆点
					clickable: true,
				},
				navigation: {   //左右箭头
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				},
				autoplay: {
					delay: this.index % 2 ? 3000 : 2000,//1秒切换一次
					disableOnInteraction: false
				},

			}
		}
	}
}
</script>

<style lang="less" scoped>
.floor {
	margin-top: 15px;

	.py-container {
		width: 1200px;
		margin: 0 auto;

		.title {
			.fl {
				float: left;
				color: #c81623;
				font-size: 20px;
				line-height: 30px;
				margin: 9px 0;
				font-weight: 700;
			}

			.fr {
				float: right;

				.nav-tabs {
					margin: 10px 0 0;
					display: inline-block;

					li {
						float: left;
						line-height: 18px;

						a {
							padding-top: 1px;
							font-weight: 400;
							background-color: #fff;

							&::after {
								content: "|";
								padding: 0 10px;
							}
						}

						&:nth-child(7) {
							a {
								&::after {
									content: "";
								}
							}
						}

						&.active {
							a {
								color: #e1251b;
							}
						}
					}
				}
			}
		}

		.tab-content {
			border-top: 2px solid #c81623;
			border-bottom: 1px solid #e4e4e4;

			.tab-pane {
				.floor-1 {
					height: 360px;
					display: flex;

					.blockgary {
						width: 210px;
						height: 100%;
						background: #f7f7f7;

						.jd-list {
							padding: 15px 0;
							overflow: hidden;

							li {
								list-style-type: none;
								float: left;
								width: 40%;
								margin: 0 10px;
								border-bottom: 1px solid #e4e4e4;
								text-align: center;
								line-height: 26px;
							}
						}

						img {
							width: 100%;
						}
					}

					.floorBanner {
						width: 330px;
						height: 100%;

						.swiper {
							--swiper-theme-color: #ff6600;
						}
					}

					.split {
						width: 220px;
						height: 100%;
						position: relative;

						.floor-x-line {
							position: absolute;
							background: #e4e4e4;
							width: 220px;
							height: 1px;
							top: 180px;
						}

						.floor-conver-pit {
							width: 100%;
							height: 50%;

							img {
								width: 100%;
								height: 100%;
								transition: all 400ms;

								&:hover {
									opacity: 0.8;
								}
							}
						}
					}

					.center {
						border: 1px solid #e4e4e4;
					}
				}
			}
		}
	}
}
</style>